<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
		<title>班车搜索</title>
		<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
		<link rel="stylesheet" href="css/jquery-weui.min.css">
		<link rel="stylesheet" href="css/v8base.css" />
		<link rel="stylesheet" type="text/css" href="css/addressKeyword.min.css"/>
		<style>
			html,body{height:100%; width:100%; overflow:hidden; margin:0; padding:0;}
			img,a,button{cursor: pointer;}
			button,input,textarea{outline: none;}
			body{
				margin: 0;
				padding: 0;
				font-family:"黑体";
				font-size: 14px;
				color: #333333;
				background: #f6f6f6;
			}
			.box{
				width:100%; 
				height:100%;
				overflow:hidden; 
				margin:0; 
				padding-top:11px;
			}
			.main{
				height:96.4%;
				width:92%;
				margin:0 auto;
				
				position: relative;
			}
			.header{
				width: 100%;
				background: #ffffff;
				border: 1px solid #f2f2f2;
				height: 100.5px;
				margin-bottom: 18px;
			}
			.form{
				width: 100%;
			}
			.form>.input{
				width: 100%;
				border-bottom: 1px solid #f2f2f2;
				height: 52px;
			}
			
			.input>.input-key{
				float: left;
				width: 13%;
				height: 52px;
				text-align: center;
				line-height: 52px;
				vertical-align: middle;
			}

			
			.input>.input-value{
				float: left;
				width: 86%;
				height: 52px;
				line-height: 52px;
			}
			
			.input>.input-value>input{
				border: 0px;
				width: 98%;
				font-size: 14px;
			}

			/*列表样式*/
			#shulittleList{
				width: 100%;
			}
			#shulittleList>.shulittleInfo{
				border: 1px solid #f2f2f2;
				min-height: 90px;
				margin-bottom: 9px;
				background: #ffffff;
				
			}
			.shulittleInfo>.shulittle-left,.shulittleInfo>.shulittle-right{
				margin-top: 15px;
				margin-bottom: 15.5px;
			}
			.shulittleInfo>.shulittle-left{
				min-width: 60%;
				max-width: 64%;
				float: left;
				
				margin-left: 19.5px;
			}
			
			.shulittleInfo>.shulittle-right{
				width: 24.8%;
				float: right;
				margin-right: 15.5px;
				
			}
			.shulittle-left>.qishiweizhi,.shulittle-left>.chepaihao{
				margin-bottom: 4px;
			}
			.shulittle-left>.qishiweizhi,.shulittle-left>.daodaweizhi{
				color: #999999;
				font-size: 15px;
			}
			.shulittle-right>.jine{
				font-size: 18px;
				color: #333333;
				text-align: center;
				margin-bottom: 10px;
				font-weight: bold;
			}
			.shulittle-right>.anniu{
				width: 100%;
				text-align: center;
			}
			.shulittle-right>.anniu>button{
				width: 70px;
				height: 28.5px;
				color: #ffffff;
				font-size: 15px;
				border: 0px;
				background: #5fafff;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="main">
				<div class="header">
					<div class="form">
						<div class="input">
							<div class="input-key"><img src="img/shijian@2x.png" width="17" style=""></div>
							<div class="input-value"><input type="text" class="date" placeholder="请选择出发时间"></div>
						</div>
						<div class="input">
							<div class="input-key"><div style="background: #5FAFFF;width: 5px;height: 5px;border-radius: 50%;margin:0 auto;margin-top:23px;"></div></div>
							<div class="input-value" ><input style="width: 72%;height: 30px;" type="text" id="startAddress" placeholder="请输入出发地点"><img width="17" src="img/sousuo@2x.png"></div>
						</div>
						
					</div>
				</div>
				
				<div id="shulittleList" ng-app="tripApp" ng-controller="tripCtrl"><!--班车列表容器-->
					<div class="shulittleInfo" ng-repeat="t in trip">
						<div class="shulittle-left">
							<div class="chepaihao"><span id="chepaihao">{{t.plate_number}}</span></div>
							<div class="qishiweizhi">
								<span>张江</span> → <span>石门一路</span>&nbsp;&nbsp;<span>·{{t.trip_time}}发车</span>
							</div>
							<div class="daodaweizhi">
								<span>威海路</span> · <span>16:00</span>
							</div>
						</div>
						<div class="shulittle-right">
							<div class="jine">
								<span>￥{{t.price}}</span>
							</div>
							<div class="anniu">
								<button>预约</button>
							</div>
						</div>
					</div>
				</div>
				
			</div>
		</div>
		
		
	</body>
	
	<script src="js/jquery.min.js"></script>
	<script src="js/jquery-weui.min.js"></script>
	<script src="js/addressKeyword.js"></script>
	<script>
		$(document).ready(function(){
			
		});
		
		
		$(".date").datetimePicker({
	        title: '出发时间',
	        	onChange: function (picker, values, displayValues) {
	        }
      	});
      	
      	//地址查询插件
      	$("#startAddress").keyupAddress(function(json){
      		var map=$.parseJSON(json);
      		$("#startAddress").val(map.title);
      	});
	</script>
	
	<script type="text/javascript">
		var app = angular.module('tripApp', []);
		
		/*app.controller('tripCtrl', function($scope, $http) {
			$http.get("arr.js")
				.success(function(response) {
					$scope.names = response.records;
				});
		});*/
		app.controller('tripCtrl', function($scope, $http) {
			
					
				$http.get("arr.js").success(function(response) {
					alert(response);
					$scope.trip = response.records;
				});
				
			
		});
	</script>
</html>
